<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加回访记录</title>

    <!-- 引入 css -->
    <link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="/admin/plugin/wangEditor/index.js"></script>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>

    <style>
        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }
        body{
            padding: 5px 20px;
        }

        .el-collapse-item__content {
            padding-bottom: 0px;
        }
    </style>

</head>
<body>

<div id="app">



    <el-collapse v-model="activeNames"  >
        <el-form :inline="true" :model="formInline[item.id]" v-for="(item,index) in fieldList" size="small" label-width="125px" :rules="rules[item.id]" ref="ruleForm" class="demo-form-inline">
        <el-collapse-item :title="item.group_name" :name="index"  >
            <template v-for="(field,fieldIndex) in item.list" >
                <el-form-item  v-if="field.is_input == '0'"    :label="field.show_name+''" :prop="field.col_name"  :class="field.show_name.length>7?'changeLHight':''"  >

                    <!--输入框-->
                    <el-input v-if="field.col_style == 0" @keyup.enter.native="huiche(field)"  :name="field.id"  @input="changeFormSubmit(field.col_name)" :disabled="field.is_disabled" v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" :style="'width:'+field.input_width" ></el-input>

                    <!--日期框-->
                    <el-date-picker v-if="field.col_style == 1" :disabled="field.is_disabled" value-format="yyyy-MM-dd"
                                    @input="changeFormSubmit(field.col_name)"
                                     :name="field.id"
                                    v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" :style="'width:'+field.input_width"
                            type="date" >
                    </el-date-picker>


                    <!--复选框-->
                    <template v-if="field.col_style == '19'" >
                        <el-checkbox-group v-model="formInline[field.group_id][field.col_name]" @change="changeFormSubmit(field.col_name)">
                            <el-checkbox v-for="option in field.options" :label="option.key"  >{{option.value}}</el-checkbox>
                        </el-checkbox-group>
                    </template>

                    <!--单选框-->
                    <template v-if="field.col_style == '21'" >
                        <el-radio v-model="formInline[field.group_id][field.col_name]"  @change="changeFormSubmit(field.col_name)" v-for="option in field.options" :label="option.key" >{{option.value}}</el-radio>
                    </template>

                    <!--日期框年月-->
                    <template v-if="field.col_style == 15" >
                        <el-date-picker value-format="yyyyMM" :style="'width:'+field.input_width"   :disabled="field.is_disabled"
                                         :name="field.id"
                                        v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name"
                                        type="month" >
                        </el-date-picker>
                    </template>

                    <!--时分秒日期框-->
                    <el-date-picker
                            v-if="field.col_style == 5" :disabled="field.is_disabled" value-format="yyyy-MM-dd HH:mm:ss"
                            @input="changeFormSubmit(field.col_name)"
                            :name="field.id"
                            v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" :style="'width:'+field.input_width"
                            type="datetime" >
                    </el-date-picker>

                    <!--下拉框-->
                    <el-select :disabled="field.is_disabled"
                               @input="changeFormSubmit(field.col_name)"
                            v-if="field.col_style == 6 || field.col_style == 8" filterable :style="'width:'+field.input_width"
                            v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" >
                        <el-option value="" ></el-option>
                        <el-option v-for="option in field.options" :label="option.value" :value="option.key"></el-option>
                    </el-select>

                    <!--远程搜索下拉框-->
                    <el-select :disabled="field.is_disabled"
                               :remote-method="(query) => remoteMethod(query,fieldIndex,item.list)"
                               remote
                               @change="changeFormSubmit(field.col_name)"
                               v-if="field.col_style == 16" filterable :style="'width:'+field.input_width"
                               v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" >
                        <el-option value="" ></el-option>
                        <el-option v-for="option in field.options" :label="option.value" :value="option.key"></el-option>
                    </el-select>

                    <!--下拉框多选-->
                    <el-select :disabled="field.is_disabled" multiple
                               @focus="changeFormSubmit(field.col_name)"
                               v-if="field.col_style == 12 || field.col_style == 13" filterable :style="'width:'+field.input_width"
                               v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" >
                        <el-option value="" ></el-option>
                        <el-option v-for="option in field.options" :label="option.value" :value="option.key"></el-option>
                    </el-select>


                    <!--远程搜索下拉框多选-->
                    <el-select :disabled="field.is_disabled" multiple
                               :remote-method="(query) => remoteMethod(query,fieldIndex,item.list)"
                               remote
                               @change="changeFormSubmit(field.col_name)"
                               v-if="field.col_style == 17" filterable :style="'width:'+field.input_width"
                               v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name" >
                        <el-option value="" ></el-option>
                        <el-option v-for="option in field.options" :label="option.value" :value="option.key"></el-option>
                    </el-select>

                    <!-- 编辑器 DOM -->
                    <div v-if="field.col_style == 3" :style="'height:300px;width:'+field.input_width" >
                        <div :id="'toolbar-container-'+field.id" :style="'width:'+field.input_width" ></div>
                        <div :id="'editor-container-'+field.id" :style="'height:300px;width:'+field.input_width" ></div>
                    </div>

                    <template v-if="field.col_style == 4" >
                        <el-upload
                                :action="wwwurl+'/admin/api/UploadController/elementUiUploadDopostFileUpload'"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                multiple
                                :data="{field:field.col_name,groupid:item.id}"
                                :headers="headers"
                                :file-list="uploadListShow[field.col_name]"
                                :on-success="uploadSuccess"
                                :on-remove="(file, fileList) => {handleRemove(file, fileList, field.col_name,field.group_id)}">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible"  >
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>

                        <el-button type="text" @click="view_upload(field)">从手机端上传</el-button>
                    </template>

                    <el-input type="textarea" v-if="field.col_style == 7"
                              :style="'width:'+field.input_width" :disabled="field.is_disabled"
                              @input="changeFormSubmit(field.col_name)"
                              @keyup.enter.native="huiche(field.nextInputId)"  :name="field.id"
                              v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name"></el-input>

                    <template v-if="field.col_style == 9" >
                        <el-radio :disabled="field.is_disabled"
                                :style="'width:'+field.input_width"
                                v-model="formInline[field.group_id][field.col_name]" :label="option.key" v-for="option in field.options" >{{option.value}}</el-radio>
                    </template>

                    <el-switch v-if="field.col_style == 10" :disabled="field.is_disabled"  active-value="true" inactive-value="false"
                            v-model="formInline[field.group_id][field.col_name]" >
                    </el-switch>

                    <el-cascader v-if="field.col_style == 11"  :ref="field.col_name" clearable filterable
                                 v-model="formInline[field.group_id][field.col_name]" :props="cascaderProps[field.col_name]"
                                   ></el-cascader>

                    <!--输入列表组件-->
                    <template  v-if="field.col_style == 14" >
                        <iframe  :name="field.col_name" :group_id="field.group_id" fr="gridList" :src="field.list_url+'&tableHeight='+field.tableHeight+'&tableId='+field.data_zygl_id+'&group_id='+field.group_id+'&col_name='+field.col_name" frameborder="0"  :style="'width:'+gridListWidth+'px;height:'+(parseInt(field.tableHeight)+50)+'px'"  ></iframe>
                    </template>



                </el-form-item>

                <div  v-if="field.is_inline == '1'"   style="display: block;" ></div>

            </template>
        </el-collapse-item>
        </el-form>
    </el-collapse>


        <!--<el-form-item>
            <el-button type="primary" @click="verification">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>-->




</div>

<script>
    var E = window.wangEditor; // 全局变量
</script>
<script>




var vm = new Vue({
    el: '#app',
    data: {
        fieldList:[],
        activeNames:[],
        headers:{token:localStorage.getItem("token")},
        uploadListShow:{},

        dialogImageUrl: '',
        dialogVisible: false,
        formInline:{},
        rules:{},
        cascaderProps:{},//三级联动动态加载
        parmsData:{},
        tableId:"",
        setFormData:{},
        gridListWidth:$(document.body).width()-30,
        other:top.data.other,
        huicheInput:{},
    },
    created(){
        this.parmsData = getParams();
        if(this.parmsData.tableId != undefined){
            this.tableId = this.parmsData.tableId;
        }else {
            this.tableId = top.data.tableId;
        }
        try{
            copy(this.parmsData,top.data.other);
        }catch (e) {}
        this.pageInit();
    },
    methods:{
        async getfileuploaddata(id){
            const res = await postWebCustom(getTableId("3294"),{id:id});
            let groupid = res.data.tableid;
            let field = res.data.zdmc;
            let durl = "";
            if(field == "hfly"){
                durl = "url";
            }
            if(field == "wxltjt"){
                durl = "wxjt";
            }
            if(vm.formInline[groupid][field] == undefined || vm.formInline[groupid][field] == ""){
                vm.formInline[groupid][field] = res.data[durl];
            }else {
                vm.formInline[groupid][field] = vm.formInline[groupid][field]+","+res.data[durl];
            }
            vm.fileListTransi(vm.formInline[groupid][field],field);
        },
        async view_upload(field){
            let id = guid();
          const res = await postWebCustom(getTableId("3293"),{tableId:field.group_id,colName:field.col_name,id:id,formdata:vm.formInline});

            top.f_layer_open_get(res.data, "30%", "40%", function () {
                vm.getfileuploaddata(id);
            }, {}, "从手机端上传", {});
        },
        //远程搜索下拉框
        async remoteMethod(query,index,itemList){
            let field = itemList[index];
            const res = await postBody("/admin/api/DataManagementController/DropdownBoxRemoteSearchEvent2",{fieldId:field.col_id,key:query});
            if(res.code == 0){
                top.alert(res.msg);
                return;
            }
            Vue.set(field,"options",res.data)

        },
        handleChange(field) {//三级联动下拉框改变事件 只保存最后一级 暂时废弃
            let values = vm.formInline[field.group_id][field.col_name];
            let vstr = values[values.length-1];
            vm.formInline[field.group_id][field.col_name] = vstr;
            // console.log(vm.formInline[field.group_id][field.col_name])
            return true;
        },
        enterNext() {
            document.onkeydown = e => {
                if (e.keyCode === 13) {
                    console.log(vm.huicheInput);
                    //回车后执行搜索方法
                    this.huiche(vm.huicheInput.nextInputId);
                }
            }
        },

        //把当前新增的数据ID赋值到录入界面中
        async setUUIDInput(uuid){
            for(let key in vm.formInline){
                let data = vm.formInline[key];
                data.id = uuid;
            }
        },

        //输入框回车事件
        huiche(field){
            if(field != undefined){
                let refid = field.nextInputId;
                if(refid != undefined){
                    vm.huicheInput = field;
                    console.log("refid",refid)
                    $("[name='"+refid+"']")[0].focus();
                }
            }
        },

        pageInit(){
          postBody("/admin/api/DataManagementController/enterCustomFieldQuery",{tableId:this.tableId,other: top.data.other},async function (res){
              vm.fieldList = res.data.fieldList;


              //动态加载三级联动
              for(let a=0;a<vm.fieldList.length;a++){
                  let group = vm.fieldList[a];
                  let colList = group["list"];
                  for(let i=0;i<colList.length;i++){
                      let col_name = colList[i].col_name;
                      if(colList[i].col_style == "11"){
                          vm.cascaderProps[col_name] = {//三级联动动态加载
                              lazy: true,
                              checkStrictly : true,
                              async lazyLoad (node, resolve){
                                  console.log("node:",node);
                                  let pid = "0000";
                                  if(node.level != '0'){
                                      pid = node.data.value;
                                  }
                                  const res = await listAdmin(colList[i].data_zygl_id,"id",{pid:pid});
                                  let nodes = [];
                                  let nodesList = res.data;
                                  for(let c=0;c<nodesList.length;c++){
                                      nodes.push({value:nodesList[c][colList[i].select_v],label:nodesList[c][colList[i].select_text],level:1});
                                  }

                                  resolve(nodes);
                              }
                          }
                      }
                  }
              }


              let ic = Object.keys(vm.setFormData).length;
              if(Object.keys(vm.setFormData).length == 0){
                  vm.formInline = res.data.mapformline;
              }else {
                  vm.formInline = vm.setFormData;
              }
              vm.rules = res.data.roles;

              //如果当前页面输入数据ID参数，并没有传入回显数据时，则直接查询数据并赋值
              if(vm.parmsData.id != undefined && vm.parmsData.id != ""){
                  let mapres = await queryDataForId(vm.tableId,vm.parmsData.id,top.data.other);
                  if(mapres.code == 1){
                      vm.formInline = mapres.data;
                  }
              }

              //开始校验表单
              setTimeout(function (){
                  let a = 0;
                  for(let zygl in vm.formInline){
                      let map = vm.formInline[zygl];
                      try {
                          vm.submitForm("ruleForm",a);
                          a++;
                      }catch (e){}
                  }
              },500);

              vm.$nextTick(()=>{
                  //三级联动下拉框回显
                  for(let a=0;a<vm.fieldList.length;a++){
                      let group = vm.fieldList[a];
                      let colList = group["list"];
                      for(let i=0;i<colList.length;i++){
                          let col_name = colList[i].col_name;
                          if(colList[i].col_style == "11"){
                              vm.$refs[col_name][0].inputValue = colList[i].options;
                              vm.$refs[col_name][0].presentText = colList[i].options;
                          }
                      }
                  }


                  for(let a=0;a<vm.fieldList.length;a++){
                      vm.activeNames.push(a);
                      if(ic >= 0){//对当前页面图片字段进行渲染
                          let columnlist = vm.fieldList[a].list;
                          for(let i=0;i<columnlist.length;i++){
                              if(columnlist[i].col_style == "4"){
                                  let groupid = vm.fieldList[a].id;
                                  let src = vm.formInline[groupid][columnlist[i].col_name];

                                  vm.fileListTransi(src,columnlist[i].col_name);
                              }
                          }
                      }

                      // 创建富文本编辑器
                      let columnlist = vm.fieldList[a].list;
                      for(let i=0;i<columnlist.length;i++){
                          if(columnlist[i].col_style == "3"){
                              // 创建编辑器1
                              let editor1 = E.createEditor({
                                  selector: '#editor-container-'+columnlist[i].id,
                                  html:vm.formInline[vm.fieldList[a].id][columnlist[i].col_name],
                                  mode: 'default',
                                  config:{
                                      onChange(editor){//文本编辑器的改变事件
                                          const html = editor.getHtml();
                                          let groupid = vm.fieldList[a].id;
                                          vm.formInline[groupid][columnlist[i].col_name] = html;
                                      },
                                      MENU_CONF:{uploadImage:{
                                          "server":'/admin/api/UploadController/systemDopostFileUpload',
                                           "headers":{token:localStorage.getItem("token")},
                                              fieldName:"file",
                                              // 自定义插入图片
                                              customInsert(res, insertFn) {
                                                  // res 即服务端的返回结果
                                                  console.log(res);
                                                  // 从 res 中找到 url alt href ，然后插图图片
                                                  insertFn(res.data.url, "","");
                                              },
                                      }}

                                  }
                              })

                              // 创建工具栏1
                              E.createToolbar({
                                  editor: editor1,
                                  selector: '#toolbar-container-'+columnlist[i].id,
                                  mode: 'default'
                              })


                          }
                      }

                  }
              })

          });
        },
        uploadSuccess(response, file, fileList){
            let groupid = response.data.groupid;
            let field = response.data.field;
            if(vm.formInline[groupid][field] == undefined || vm.formInline[groupid][field] == ""){
                vm.formInline[groupid][field] = response.data.src;
                // Vue.set(vm.formInline,response.data.field,response.data.src);
            }else {
                vm.formInline[groupid][field] = vm.formInline[groupid][field]+","+response.data.src;
                // Vue.set(vm.formInline,response.data.field,vm.formInline[response.data.field]+","+response.data.src)
            }
        },
        fileListTransi(src,field){
            if(src==null || src==undefined|| src == ""){
                return ;
            }
            let urls = src.split(",");
            let fileList = [];
            for(let a=0;a<urls.length;a++){
                fileList.push({name:"",url:urls[a]});
            }
            Vue.set(vm.uploadListShow,field,fileList);
        },

        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleRemove(file,fileList,field,zygl_id) {
            let urls = "";
            for(let a=0;a<fileList.length;a++){
                let url = fileList[a].url;
                if(url.indexOf("blob:") == -1){
                    if(urls == ""){
                        urls = url;
                    }else {
                        urls = urls+","+url;
                    }
                }

            }
            vm.formInline[zygl_id][field] = urls;
        },
        submitForm(formName,index) {
            try {
                vm.$refs[formName][index].validate((valid) => {
                    if (valid) {
                        return true;
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }catch (e){}

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        changeFormSubmit(v){
            console.log("vvv",v);
            top.data.changeColumn = v;
        },
        changePost:throttle(async function (){
            const res = await postBody("/admin/api/DataManagementController/inputBoxChangeEvent",{tableId:this.tableId,mapdata:{"oldValue":top.data.oldValue,"newValue":top.data.newValue},other:{fieldList:vm.fieldList,rules:vm.rules,other:top.data.other,changeColumn:top.data.changeColumn}});
            if(res.code == 1){
                vm.fieldList = res.data.other.fieldList;
                vm.formInline = res.data.mapdata.newValue;
                vm.rules = res.data.other.rules;
                top.data.changeColumn = "";
                //循环列表编辑的数据
                /*let iframes = $("[fr=gridList]");
                for(let a=0;a<iframes.length;a++){
                    let src = $(iframes[a]).attr("src");
                    $(iframes[a]).attr("src",src);
                }*/


                //循环列表重新加载数据
                for(let a=0;a<vm.fieldList.length;a++){
                    let listcol = vm.fieldList[a].list;
                    for(let i=0;i<listcol.length;i++){
                        if(listcol[i].col_style == "14"){
                            let src = $("[name="+listcol[i].col_name+"]").attr("src");
                            $("[name="+listcol[i].col_name+"]").attr("src",src);
                        }
                    }
                }
            }else if("未定义录入事件接口" != res.msg){
                top.error(res.msg);
            }
        }, 800)
    },
    computed: {
        formInlineFun() {
            return JSON.parse(JSON.stringify(this.formInline));
        },
    },
    watch:{
        formInlineFun:{
            async handler (newValue, oldValue) {
                let isdif = diff(newValue,oldValue);
                if(isdif){
                    return;
                }
                if(Object.keys(oldValue).length == 0){
                    return;
                }
                top.data.oldValue = oldValue;
                top.data.newValue = newValue;
                this.changePost();
                return;
            },
            deep: true
        }
    }
})


async function  queryfordata(){
    let mapres = await queryDataForId(vm.tableId,vm.parmsData.id,top.data.other);
    if(mapres.code == 1){
        vm.formInline = mapres.data;
    }
}


//验证必填项
function verification() {
    let a = 0;
    for(let zygl in vm.formInline){
        let map = vm.formInline[zygl];
        try {
            vm.submitForm("ruleForm",a);
            a++;
        }catch (e){}
    }
    for(let zygl in vm.formInline){
        let map = vm.formInline[zygl];
        for(let key in map){
            try {
                let value = map[key];
                if(vm.rules[zygl][key] != undefined && value == ""){
                    top.error("红*号必输项不能为空!"+key+" "+value);
                    return false;
                }
            }catch (e){}
        }

    }
    return true;
}

function getData(){
    return vm.formInline;
}

function getData_old() {
    let dataObj = {};
    vm.formInline["data"] = {};
    console.log("11",vm.formInline);
    for(let key in vm.formInline){
        let data = vm.formInline[key];
        copy(data,dataObj);
    }


    //循环列表编辑的数据
    let iframes = $("[fr=gridList]");
    for(let a=0;a<iframes.length;a++){
        let name = $(iframes[a]).attr("name");
        //把当前页面中列表中的tableData数据暂时先扔掉
        // dataObj[name] = $(iframes[a])[0].contentWindow.vm.tableData;
        console.log(name);
        console.log(dataObj[name]);
    }

    vm.formInline["data"] = {};
    return vm.formInline;
}


function setData(data) {
    if(Object.keys(data).length > 0){
        vm.setFormData = data;
        vm.formInline = data;
    }

}
</script>


</body>
</html>
